<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OverType - The Markdown Editor That's a Textarea</title>

    <meta name="description" content="OverType is a transparent textarea over rendered markdown. Plain text simplicity, WYSIWYG beauty, zero complexity.">
    <meta property="og:url" content="https://overtype.dev/">
    <meta property="og:type" content="website">
    <meta property="og:title" content="OverType - The Markdown Editor That's a Textarea">
    <meta property="og:description" content="OverType is a transparent textarea over rendered markdown. Plain text simplicity, WYSIWYG beauty, zero complexity.">
    <meta property="og:image" content="https://overtype.dev/open-graph.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta property="twitter:domain" content="overtype.dev">
    <meta property="twitter:url" content="https://overtype.dev/">
    <meta name="twitter:title" content="OverType - The Markdown Editor That's a Textarea">
    <meta name="twitter:description" content="OverType is a transparent textarea over rendered markdown. Plain text simplicity, WYSIWYG beauty, zero complexity.">
    <meta name="twitter:image" content="https://overtype.dev/open-graph.png">

    <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png">
    <link rel="manifest" href="/assets/site.webmanifest">

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: "SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, "Roboto Mono", "Noto Sans Mono", "Droid Sans Mono", "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", Courier, monospace;
            font-synthesis: none; /* no faux bold/italic width drift */
            font-variant-ligatures: none; /* keep metrics stable for code */
            background: #000;
            color: #fff;
            font-size: 14px;
            line-height: 1.6;
            overflow-x: hidden;
        }

        .container {
            max-width: 900px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        h1, h2, h3, h4, h5, h6 {
            font-weight: normal;
            font-size: 14px;
            margin: 40px 0 20px 0;
        }

        h1 {
            text-align: center;
            margin: 60px 0 10px 0;
        }

        h2 {
            border-bottom: 1px solid #333;
            padding-bottom: 10px;
            margin-top: 60px;
            text-align: center;
        }

        p {
            margin: 20px 0;
        }

        a {
            color: #fff;
            text-decoration: underline;
        }

        a:hover {
            background: #fff;
            color: #000;
            text-decoration: none;
        }

        .hero {
            text-align: center;
            padding: 60px 0 0 0;
        }

        .hero h1 {
            margin-bottom: 20px;
        }

        .hero .subtitle {
            max-width: 700px;
            margin: 0 auto 30px;
        }

        .value-props {
            display: flex;
            justify-content: center;
            gap: 30px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .value-props > span {
            opacity: 0.7;
        }

        .github-link {
            position: absolute;
            top: 20px;
            right: 20px;
            color: #fff;
            text-decoration: none;
            opacity: 0.7;
            transition: opacity 0.2s;
            font-size: 12px;
        }

        .github-link:hover {
            opacity: 1;
        }

        .pain-points {
            margin: 30px 0;
            padding-left: 20px;
            list-style-position: outside;
        }

        .pain-points li {
            margin: 15px 0;
        }

        .quote-box {
            border-left: 3px solid #333;
            padding-left: 20px;
            margin: 30px 0;
            font-style: italic;
            opacity: 0.8;
        }

        .diagram {
            text-align: center;
            margin: 40px 0;
        }

        .diagram img {
            max-width: 100%;
            height: auto;
            border: 1px solid #333;
        }

        .three-pillars {
            margin: 30px 0;
        }

        .pillar {
            margin: 20px 0;
            padding-left: 20px;
        }

        /* Demo Section */
        .demo-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
            gap: 20px;
            margin: 40px 0;
        }

        .demo-panel {
            border: 1px solid #333;
            background: #0a0a0a;
            overflow: hidden;
        }

        .demo-header {
            padding: 10px;
            border-bottom: 1px solid #333;
            background: #111;
        }

        .editor-wrapper {
            height: 300px;
            position: relative;
        }

        .callout {
            text-align: center;
            margin: 30px 0;
            opacity: 0.8;
        }

        /* Two column layout */
        .two-columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin: 30px 0;
        }

        .column h3 {
            margin-bottom: 15px;
        }

        .column ul {
            list-style: none;
            padding: 0;
        }

        .column li {
            margin: 10px 0;
            padding-left: 20px;
        }

        .check { color: #0f0; }
        .cross { color: #f00; }

        /* Code blocks */
        .code-block {
            background: #111;
            border: 1px solid #333;
            padding: 20px;
            margin: 20px 0;
            overflow-x: auto;
        }

        .code-block pre {
            margin: 0;
            font-family: inherit;
            font-size: inherit;
        }

        .steps {
            margin: 30px 0;
        }

        .step {
            margin: 30px 0;
        }

        .step h3 {
            margin-bottom: 10px;
        }

        /* Comparison table */
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 30px 0;
        }

        table th,
        table td {
            padding: 15px;
            text-align: left;
            border: 1px solid #333;
        }

        table th {
            background: #111;
        }

        /* CTA Section */
        .cta {
            text-align: center;
            margin: 60px 0;
            padding: 40px 0;
        }

        .cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-top: 30px;
        }

        .btn {
            padding: 12px 30px;
            border: 1px solid #fff;
            background: transparent;
            color: #fff;
            text-decoration: none;
            cursor: pointer;
            font-family: inherit;
            font-size: inherit;
            transition: all 0.2s;
        }

        .btn:hover {
            background: #fff;
            color: #000;
        }

        .btn-primary {
            background: #fff;
            color: #000;
        }

        .btn-primary:hover {
            background: transparent;
            color: #fff;
        }

        /* Footer */
        footer {
            text-align: center;
            padding: 40px 0;
            opacity: 0.9;
            border-top: 1px solid #333;
        }

        footer nav {
            margin-bottom: 20px;
        }

        footer nav a {
            margin: 0 15px;
        }

        /* Mobile */
        @media (max-width: 768px) {
            .two-columns {
                grid-template-columns: 1fr;
            }
            
            .demo-grid {
                grid-template-columns: 1fr;
            }
            
            .value-props {
                flex-direction: column;
                gap: 10px;
            }
        }
    </style>
</head>
<body>
    <a href="https://github.com/panphora/overtype" class="github-link">View on GitHub →</a>
    
    <!-- Hero Section -->
    <div class="hero">
        <div class="container">
            <img src="logo-text.svg" alt="OverType" style="width: 300px; max-width: 90%; margin: 0 auto 30px; display: block;">
            <h1>THE MARKDOWN EDITOR THAT'S A TEXTAREA</h1>
            <p class="subtitle">
                OverType is a transparent textarea over rendered markdown.<br>
                Plain text simplicity, WYSIWYG beauty, zero complexity.
            </p>
            <div class="value-props">
                <span><span class="overtype-size">91KB</span> TOTAL</span>
                <span>•</span>
                <span>ONE SCRIPT TAG</span>
                <span>•</span>
                <span>UNDERSTAND YOUR EDITOR</span>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- Problem Section -->
        <h2>AN UNDER-ENGINEERED SOLUTION</h2>
        
        <ul class="pain-points">
            <li>
                <strong>A SINGLE LAYER OF ABSTRACTION</strong> - A textarea over a preview div
            </li>
            <li>
                <strong>AN OPEN BOX</strong> - Read, understand, and modify the code
            </li>
            <li>
                <strong>WYSIWYG WITHOUT THE HAIR-PULLING</strong> - Everything just works, it's native
            </li>
        </ul>

        <div class="quote-box">
            "Simple request: Edit markdown. Reality: Install 50+ dependencies."
        </div>

        <!-- Solution Section -->
        <h2>JUST A TEXTAREA</h2>
        
        <div class="diagram" style="height: 500px; position: relative; margin: 40px 0;">
            <iframe src="diagram-embed.html" style="width: 100%; height: 100%; border: none; background: transparent;" title="OverType Architecture: Transparent textarea over rendered markdown"></iframe>
        </div>

        <div class="three-pillars">
            <div class="pillar">
                1. <strong>TYPE IN A TEXTAREA</strong> - All native browser features just work
            </div>
            <div class="pillar">
                2. <strong>SEE RENDERED OUTPUT</strong> - Beautiful formatted text appears beneath
            </div>
            <div class="pillar">
                3. <strong>THAT'S IT</strong> - No virtual DOM, no ContentEditable
            </div>
        </div>

        <!-- Demo Section -->
        <h2 id="demos">SEE IT IN ACTION</h2>
        
        <div class="demo-grid">
            <div class="demo-panel" id="basic-editor">
                <div class="demo-header">MAIN EDITOR</div>
                <div class="editor-wrapper demo-editor"></div>
            </div>
            <div class="demo-panel" id="toolbar">
                <div class="demo-header">WITH TOOLBAR</div>
                <div class="editor-wrapper demo-editor-toolbar"></div>
            </div>
        </div>

        <p class="callout">
            Everything just works: undo/redo, mobile keyboards, native selection - because it's really a textarea.
        </p>

        <div style="text-align: center; margin-top: 30px;">
            <a href="/demo.html" style="display: inline-block; background: #4251de; color: white; padding: 10px 20px; text-decoration: none; font-size: 12px; font-weight: bold; letter-spacing: 1px; transition: background 0.2s;">SEE ALL DEMOS</a>
        </div>

        <!-- Benefits Section -->
        <h2>THE BEST OF BOTH WORLDS</h2>
        
        <div class="two-columns">
            <div class="column">
                <h3 style="margin-top: 0;">YOU GET:</h3>
                <ul>
                    <li><span class="check">✓</span> A beautiful WYSIWYG editor</li>
                    <li><span class="check">✓</span> Native textarea interactions</li>
                    <li><span class="check">✓</span> Total control</li>
                </ul>
            </div>
            <div class="column">
                <h3 style="margin-top: 0;">WITHOUT:</h3>
                <ul>
                    <li><span class="cross">✗</span> Build steps</li>
                    <li><span class="cross">✗</span> Framework requirements</li>
                    <li><span class="cross">✗</span> ContentEditable bugs</li>
                </ul>
            </div>
        </div>

        <!-- Implementation Section -->
        <h2>SET UP</h2>
        
        <div class="steps">
            <div class="step">
                <h3>1. ADD THE SCRIPT</h3>
                <div class="code-block">
                    <pre>&lt;script src="https://unpkg.com/overtype"&gt;&lt;/script&gt;</pre>
                </div>
            </div>
            
            <div class="step">
                <h3>2. ADD YOUR EDITORS</h3>
                <div class="code-block">
                    <pre>&lt;div class="editor"&gt;&lt;/div&gt;
&lt;div class="editor"&gt;&lt;/div&gt;</pre>
                </div>
            </div>
            
            <div class="step">
                <h3>3. INITIALIZE</h3>
                <div class="code-block">
                    <pre>new OverType(".editor");</pre>
                </div>
            </div>
        </div>

        <p style="text-align: center; opacity: 0.8;">
            That's it. No npm. No build. No config.
        </p>

        <!-- Under the Hood Section -->
        <h2>A PEEK UNDER THE HOOD</h2>
        
        <div class="code-block">
            <pre><span style="opacity: 0.5">// The entire trick:</span>
layerElements(textarea, preview)           <span style="opacity: 0.5">// Position textarea over preview</span>
applyIdenticalSpacing(textarea, preview)   <span style="opacity: 0.5">// Match fonts, padding, line-height exactly</span>

<span style="opacity: 0.5">// Make textarea invisible but keep the cursor</span>
textarea.style.background = 'transparent'
textarea.style.color = 'transparent'
textarea.style.caretColor = 'black'

<span style="opacity: 0.5">// Keep them in sync</span>
textarea.addEventListener('input', () => {
  preview.innerHTML = parseMarkdown(textarea.value)
  syncScroll(textarea, preview)
})

<span style="opacity: 0.5">// That's it. Everything else is polish.</span></pre>
        </div>
        
        <p style="text-align: center; opacity: 0.7;">
            That's it. A transparent textarea over a preview div. No virtual DOM. No ContentEditable. No magic.
        </p>

        <!-- Comparison Section -->
        <h2>ANTI-COMPLEXITY</h2>
        
        <table>
            <thead>
                <tr>
                    <th>OVERTYPE</th>
                    <th>OTHER EDITORS</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><span class="overtype-size">91KB</span> total</td>
                    <td>300-500KB + dependencies</td>
                </tr>
                <tr>
                    <td>Minutes to understand</td>
                    <td>Hours to understand</td>
                </tr>
                <tr>
                    <td>Minutes to customize</td>
                    <td>Days to customize</td>
                </tr>
                <tr>
                    <td>It's a textarea</td>
                    <td>12 pages of docs</td>
                </tr>
            </tbody>
        </table>

        <!-- CTA Section -->
        <div class="cta">
            <h2>START BUILDING</h2>
            <div class="cta-buttons">
                <a href="#demo" class="btn btn-primary" onclick="document.querySelector('.demo-editor').scrollIntoView({behavior: 'smooth'}); return false;">TRY IT NOW</a>
                <a href="https://github.com/panphora/overtype" class="btn">VIEW ON GITHUB</a>
            </div>
            <div style="margin-top: 40px; font-style: italic; opacity: 0.8;">
                "Wonderfully boring."
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <nav>
            <a href="https://github.com/panphora/overtype">GITHUB</a>
            <a href="https://npmjs.com/package/overtype">NPM</a>
            <a href="https://github.com/panphora/overtype#readme">DOCUMENTATION</a>
        </nav>
        <p style="margin-bottom: 2.5rem;">Built with the radical idea that sometimes dumb ideas work</p>
        <div style="margin-bottom: 2.5rem; font-size: 19px; text-align: center;">------------------------------</div>
        <p style="">
            Ready for another radical idea? <br>
            <a href="https://hyperclay.com" target="_blank">Let's remove every layer of<br> the web application stack.</a>
        </p>
    </footer>

    <!-- Load OverType -->
    <script src="dist/overtype.min.js"></script>
    <script>
        // Sample content for demos
        const samples = {
            main: `# Welcome to OverType

This is **markdown** with *real-time* preview.

## Getting Started
1. Install from npm or CDN
2. Add a div to your HTML
3. Initialize with one line of code

## Code Example
\`\`\`
const editor = new OverType('#editor', {
  value: '# Hello World',
  theme: 'cave'
});
\`\`\`

> A textarea doing what textareas do best.`,

            toolbar: `# Toolbar Features

Use the toolbar or keyboard shortcuts:

## Text Formatting
- **Bold** text (Cmd/Ctrl + B)
- *Italic* text (Cmd/Ctrl + I)
- \`inline code\` (Cmd/Ctrl + \`)

## Lists & Structure
1. Numbered lists
2. Bullet points
3. Task lists
4. Block quotes

## Code Blocks
\`\`\`
// Full code block support
function hello() {
  return 'world';
}
\`\`\`

The toolbar is optional and lightweight.`
        };

        // Initialize demo editors
        document.addEventListener('DOMContentLoaded', function() {
            const OT = window.OverType.default || window.OverType;
            
            // Initialize all main editors
            new OT('.demo-editor', {
                value: samples.main,
                theme: 'cave'
            });
            
            // Initialize all toolbar editors
            new OT('.demo-editor-toolbar', {
                value: samples.toolbar,
                toolbar: true,
                theme: 'cave'
            });
        });
    </script>
</body>
</html>
